<template>
	<view class="body">
		<view class="item between">
			<text>姓名</text>
			<input class="sub" type="text" v-model="form.name" value="" placeholder="请输入姓名">
		</view>
		<view class="item between mb20">
			<text>身份证</text>
			<input type="idcard" v-model="form.idcardno" placeholder="请输入身份证号码">
		</view>
		<!-- 报读类型 -->
		<view class="item between">
			<text>报读类型</text>
			<picker mode='selector' :range="enrollmentLists" range-key="name" :value="eIndex"
				@change="setList('enrollmentLists','eIndex','enrollment',$event)">
				<!-- 选择后，显示中文名称 -->
				<view class="sub" v-if="form.enrollment">{{form.enrollment}}</view>
				<!-- 右边弹出选择按钮 -->
				<view v-else class="icon sub iconfont icon-xiangyou1"></view>
			</picker>
		</view>
		<!-- 年级 -->
		<view class="item between ">
			<text>年级</text>
			<picker mode='selector' :range="collegegradeLists" range-key="name"
				@change="setList('collegegradeLists','gIndex','grade',$event)" :value="f0rm.gid">
				<view v-if="form.grade" class="sub">{{form.grade}}</view>
				<view v-else class="icon sub iconfont icon-xiangyou1"></view>
			</picker>
		</view>
		<!-- 层次 -->
		<view class="item between ">
			<text>层次</text>
			<picker mode='selector' :range="levList" range-key="name"
				@change="setList('levList','lIndex','levels',$event)" :value="lIndex">
				<view v-if="form.levels" class="sub">{{form.levels}}</view>
				<view v-else class="icon sub iconfont icon-xiangyou1"></view>
			</picker>
		</view>
		<!-- 院校 -->
		<view class="item between ">
			<text>院校</text>
			<picker mode='selector' :range="insList" range-key="name"
				@change="setList('insList','iIndex','institutions',$event)" :value="iIndex">
				<view v-if="form.institutions" class="sub">{{form.institutions}}</view>
				<view v-else class="icon sub iconfont icon-xiangyou1"></view>
			</picker>
		</view>
		<!-- 专业 -->
		<view class="item between ">
			<text>专业</text>
			<!-- todo : 有个问题，没有选择学院的时候，应该要提示，并不展开列表 -->
			<picker mode='selector' :range="speList" range-key="name" @click="checkIns" ref="spePicker"
				@change="setList('speList','sIndex','speciality',$event)" :value="sIndex">
				<view v-if="form.speciality" class="sub">{{form.speciality}}</view>
				<view v-else class="icon sub iconfont icon-xiangyou1"></view>
			</picker>
		</view>
		<!-- 考试县区 -->
		<view class="item between ">
			<text>考试县区</text>
			<picker mode='selector' :range="quList" range-key="name" @change="setList('quList','qIndex','qu',$event)"
				:value="qIndex">
				<view v-if="form.qu" class="sub">{{form.qu}}</view>
				<view v-else class="icon sub iconfont icon-xiangyou1"></view>
			</picker>
		</view>
		<view class="btn" @click="nextConform">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enrollmentLists: [], // 报读类型
				eIndex: 0, //类型下标-初始化值，就看这个下标
				collegegradeLists: [], // 年级
				gIndex: 0, //年级下标
				levList: [], //层次列表
				lIndex: 0, //层次下标
				insList: [], //院校列表
				iIndex: 0, //院校下标
				speList: [], //专业列表
				sIndex: 0, //专业下标
				quList: [], //县区列表
				qIndex: 0, //县区下标
				// 表单数据
				form: {
					name: '', //姓名
					idcardno: '', //身份证
					// 以下字段，只是为了显示界面所用，中文, 具体选择的数据ID，要根据上面的下标找到记录来处理
					enrollment: '', //报读类型
					grade: '', //年级
					levels: '', //层次
					institutions: '', //院校
					speciality: '', //专业
					city: '', //城市
					qu: ''
				}
			}
		},
		onLoad() {
			this.getEnrollmentLists();
			this.getCollegegradeLists();
			this.getLevList();
			this.getInsList();
		},
		methods: {
			getEnrollmentLists() {
				this.$core.get({
					url: 'god/enrollment/lists',
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;

						this.enrollmentLists = data;
					},
					fail: (ret, response) => {
						console.error('报读类型列表获取失败', ret);
						return false;
					}
				})
			},
			getCollegegradeLists() {
				this.$core.get({
					url: 'god/collegegrade/lists',
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;

						this.collegegradeLists = data;
					},
					fail: (ret, response) => {
						console.error('年级列表获取失败', ret);
						return false;
					}
				})
			},
			getLevList() {
				this.$core.get({
					url: 'god/stureadlevelinfo/lists',
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;

						this.levList = data;
					},
					fail: (ret, response) => {
						console.error('年级列表获取失败', ret);
						return false;
					}
				})
			},
			getInsList() {
				this.$core.get({
					url: 'god/college/lists',
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;

						this.insList = data;
					},
					fail: (ret, response) => {
						console.error('学院列表获取失败', ret);
						return false;
					}
				})
			},
			getSpeList() {
				const ins = this.insList[this.iIndex]
				this.$core.get({
					url: 'god/major/lists?college_id=' + ins.id,
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;

						this.speList = data;
					},
					fail: (ret, response) => {
						console.error('年级列表获取失败', ret);
						return false;
					}
				})
			},
			getQuList() {
				const ins = this.insList[this.iIndex]
				this.$core.get({
					url: 'god/examarea/lists?ids=' + ins.exam_area,
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;
			
						this.quList = data;
					},
					fail: (ret, response) => {
						console.error('学院考试区县列表获取失败', ret);
						return false;
					}
				})
			},
			checkIns() {
				if(this.iIndex <= -1) {
					uni.showToast({'title':'请选择院校',icon:"none", position: "top"});
					return false;
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// name 列表
			// index Picker中的下标
			// val form对象中字段名
			// e 当前控件的事件对象
			setList(name, index, val, e) {
				this.form[val] = this[name][e.detail.value].name
				this[index] = e.detail.value
				if (name === 'insList') {
					// 初始化数据 专业数据
					this.getSpeList();
					this.form.speciality = '';
					// 学院下的考试区县
					this.getQuList();
					this.form.qu = '';
				}
			},
			nextConform() {
				// 各字段判断是否已选择
				if(this.form.idcardno === '') {
					uni.showToast({'title':'请输入身份证号',icon:"none", position: "top"});
					return false;
				}
				if(this.form.name === '') {
					uni.showToast({'title':'请输入姓名',icon:"none", position: "top"});
					return false;
				}
				const eVal = this.enrollmentLists[this.eIndex]; // 报读类型
				const gVal = this.collegegradeLists[this.gIndex]; // 年级
				const lVal = this.levList[this.lIndex]; // 层次
				const iVal = this.insList[this.iIndex]; // 院校
				const sVal = this.speList[this.sIndex]; // 专业
				const qVal = this.quList[this.qIndex]; // 县区
				const {mobile} = this.$core.getCache("userinfo");
				this.$core.setCache('read_info', {
					name: this.form.name,
					idCardNo: this.form.idcardno,
					phone:mobile,
					eVal, gVal, lVal, iVal, sVal, qVal
				})
				this.navTo('/pages/information/information');
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		text-align: right;
	}

	.btn {
		background-color: #f26662;
		background-image: linear-gradient(to bottom right, #f86f6b, #ef425c);
		border-radius: 60rpx;
		color: #fff;
		font-size: 34rpx;
		padding: 20rpx 0;
		width: 90%;
		margin: 20rpx auto;
		text-align: center;
	}
</style>